<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录/注册</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        * {
            box-sizing:border-box;
        }
        body {
            font-family:'Montserrat',sans-serif;
            background:#f6f5f7;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            height:100vh;
            margin:-20px 0 50px;
        }
        h1 {
            font-weight:bold;
            margin:0;
        }
        p {
            font-size:14px;
            line-height:20px;
            letter-spacing:.5px;
            margin:20px 0 30px;
        }
        span {
            font-size:12px;
        }
        a {
            color:#333;
            font-size:14px;
            text-decoration:none;
            margin:15px 0;
        }
        .dowebok {
            background:#fff;
            border-radius:10px;
            box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
            position:relative;
            overflow:hidden;
            width:768px;
            max-width:100%;
            min-height:480px;
        }
        .form-container form {
            background:#fff;
            display:flex;
            flex-direction:column;
            padding:0 50px;
            height:100%;
            justify-content:center;
            align-items:center;
            text-align:center;
        }
        .social-container {
            margin:20px 0;
        }
        .social-container a {
            border:1px solid #ddd;
            border-radius:50%;
            display:inline-flex;
            justify-content:center;
            align-items:center;
            margin:0 5px;
            height:40px;
            width:40px;
        }
        .social-container a:hover {
            background-color:#eee;
        }
        .form-container input {
            background:#eee;
            border:none;
            padding:12px 15px;
            margin:8px 0;
            width:100%;
            outline:none;
        }
        button {
            border-radius:20px;
            border:1px solid lightseagreen;
            background:lightseagreen;
            color:#fff;
            font-size:12px;
            font-weight:bold;
            padding:12px 45px;
            letter-spacing:1px;
            text-transform:uppercase;
            transition:transform 80ms ease-in;
            cursor:pointer;
        }
        button:active {
            transform:scale(.95);
        }
        button:focus {
            outline:none;
        }
        button.ghost {
            background:transparent;
            border-color:#fff;
        }
        .form-container {
            position:absolute;
            top:0;
            height:100%;
            transition:all .6s ease-in-out;
        }
        .sign-in-container {
            left:0;
            width:50%;
            z-index:2;
        }
        .sign-up-container {
            left:0;
            width:50%;
            z-index:1;
            opacity:0;
        }
        .overlay-container {
            position:absolute;
            top:0;
            left:50%;
            width:50%;
            height:100%;
            overflow:hidden;
            transition:transform .6s ease-in-out;
            z-index:100;
        }
        .overlay {
            background:lightseagreen;
            background:linear-gradient(to right,lightseagreen,lightseagreen) no-repeat 0 0 / cover;
            color:#fff;
            position:relative;
            left:-100%;
            height:100%;
            width:200%;
            transform:translateY(0);
            transition:transform .6s ease-in-out;
        }
        .overlay-panel {
            position:absolute;
            top:0;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            padding:0 40px;
            height:100%;
            width:50%;
            text-align:center;
            transform:translateY(0);
            transition:transform .6s ease-in-out;
        }
        .overlay-right {
            right:0;
            transform:translateY(0);
        }
        .overlay-left {
            transform:translateY(-20%);
        }
        /* Move signin to right */
        .dowebok.right-panel-active .sign-in-container {
            transform:translateY(100%);
        }
        /* Move overlay to left */
        .dowebok.right-panel-active .overlay-container {
            transform:translateX(-100%);
        }
        /* Bring signup over signin */
        .dowebok.right-panel-active .sign-up-container {
            transform:translateX(100%);
            opacity:1;
            z-index:5;
        }
        /* Move overlay back to right */
        .dowebok.right-panel-active .overlay {
            transform:translateX(50%);
        }
        /* Bring back the text to center */
        .dowebok.right-panel-active .overlay-left {
            transform:translateY(0);
        }
        /* Same effect for right */
        .dowebok.right-panel-active .overlay-right {
            transform:translateY(20%);
        }
    </style>
</head>


<body>
<div class="dowebok" id="dowebok">
    <div class="form-container sign-up-container">
        <form>
            <h1>注册</h1>
            <span>请输入您的信息</span>
            <input type="text" id="Username" name="username" placeholder="姓名">
            <input type="password" id="Password" name="password" placeholder="以字母开头只能包含字母、数字和下划线">
            <input type="password" id="qwe" name="idcard"  placeholder="身份证">
            <button type="button" onclick="qiehuan()">注册</button>
            
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form>
            <h1>登录</h1>
            <span>请输入您的帐号</span>
            <input id="dlname" type="text" placeholder="姓名">
            <input id="dlpass" type="password" placeholder="密码">
            <button type="button" id="pd" onclick="game()">登录</button>
            
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>已有帐号？</h1>
                <p>请使用您的帐号进行登录</p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>没有帐号？</h1>
                <p>立即注册加入我们，和我们一起开始旅程吧</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">
    var signUpButton = document.getElementById('signUp')
    var signInButton = document.getElementById('signIn')
    var container = document.getElementById('dowebok')

    signUpButton.addEventListener('click', function() {
        container.classList.add('right-panel-active')
    })

    signInButton.addEventListener('click', function() {
        container.classList.remove('right-panel-active')
    })
</script>

</body>
</html>

<script>
    var namelist = [];
    var passlist = [];
    function qiehuan() {

    	var identityCard = document.getElementById('qwe').value;
	    var len = identityCard.length;
	    if (len == 0 || len != 15 && len != 18) {
	        alert("请输入正确的身份证号");
	    } else {
	    var strBirthday = "";
	    if (len == 18)
	    {
	        strBirthday = identityCard.substr(6, 4) + "/" + identityCard.substr(10, 2) + "/" + identityCard.substr(12, 2);
	    }
	    if (len == 15) {
	        strBirthday = "19" + identityCard.substr(6, 2) + "/" + identityCard.substr(8, 2) + "/" + identityCard.substr(10, 2);
	    }
	    
	    var birthDate = new Date(strBirthday);
	    var nowDateTime = new Date();
	    var age = nowDateTime.getFullYear() - birthDate.getFullYear();console.log(age);
	    
	    if (age<18) {
	    	alert("检测到您还未成年，请合理安排游玩时间")
	    }else{
	    	alert("注册成功，请登录");
	    }
	        // if ((len != 15) && (len != 18))
	        // {
	        //     alert("请输入正确的身份证号");
	        // }
	    }






        
        var pass = document.getElementById("Password").value;
        passlist.push(pass);
        var name = document.getElementById("Username").value;
        namelist.push(name);
        console.log(pass)

    }

    var gameButton = document.getElementById('pd')
    gameButton.addEventListener('click', function() {
    	var name = document.getElementById("dlname").value;
    	var pass = document.getElementById("dlpass").value;
    	for (var i = 0; i <= namelist.length; i++) {
    		if (name == namelist[i] && pass == passlist[i]) {
    			alert("登录成功");
    			window.open("maze.html");
    			window.close()
    		}else{
    			alert("输入错误请重试")
    		}
    	}
    })
</script>

